<template>
  <el-dialog
    title="填写物流信息"
    :visible.sync="visible"
    width="350px"
    :before-close="
      () => {
        $emit('close');
      }
    "
  >
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item
        prop="logistics"
        :rules="{
          required: true,
          message: '请选择物流类型',
          trigger: 'blur'
        }"
        label="物流类型"
      >
        <el-select v-model="form.logistics" placeholder="请选择">
          <el-option
            v-for="item in expressList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        prop="logistics_number"
        :rules="{
          required: true,
          message: '请填写物流单号',
          trigger: 'blur'
        }"
        label="物流单号"
      >
        <el-input v-model="form.logistics_number"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('close')">取 消</el-button>
      <el-button type="primary" @click="deliver">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { goodDeliver } from "@/api/order-mng";
import { getExpressList } from "@/api/express-mng";
export default {
  props: ["visible", "item"],
  data() {
    return {
      form: {
        logistics: null,
        logistics_number: null
      },
      expressList: []
    };
  },
  watch: {
    visible: function(val) {
      if (val) {
      }
    }
  },
  methods: {
    deliver() {
      this.$refs.form.validate(valid => {
        if (valid) {
          goodDeliver({
            id: this.item.id,
            logistics: this.form.logistics,
            logistics_number: this.form.logistics_number
          }).then(res => {
            if (res.code === 200) {
              this.form = {
                logistics: null,
                logistics_number: null
              };
              this.$message({
                message: "发货成功",
                type: "success"
              });
              this.$emit("close");
            }
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    }
  },
  created() {
    getExpressList().then(res => {
      if (res.code === 200) {
        this.expressList = res.data;
      }
    });
  }
};
</script>

<style lang="scss" scoped></style>
